<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>和园园的私人小屋</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" type="text/css" href="css/page_style.css" />
		<link rel="stylesheet" type="text/css" href="css/page_style2.css" />
		<style type="text/css">
			#svgBox,
			#svgBox1 {
				position: absolute;
				z-index: 1;
				width: 100%;
				text-align: center;
			}

			#svgBox svg:nth-child(1) {
				top: 50px;
			}

			#svgBox svg:nth-child(2) {
				top: -50px;
			}
		</style>
	</head>
	<body>
		<div class="menu" id="vue">
			<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
			 background-color="#545c64" text-color="#fff" active-text-color="#00aaff">
				<el-submenu index="1">
					<template slot="title">这是给园园准备的</template>
					<el-submenu index="1-1">
						<template slot="title">给园园的歌</template>
						<el-menu-item :index="'1-2-'+index" v-for="(item,index) in songs" @click="click_song(item)">{{item.name}}</el-menu-item>
					</el-submenu>
					<el-submenu index="1-2">
						<template slot="title">留言</template>
						<el-menu-item :index="'2-4-'+index" v-for="(item,index) in leave_messages" @click="click_leave_msg(item)">{{item.title}}</el-menu-item>
					</el-submenu>
					<el-menu-item index="1-3" @click="draw">画画</el-menu-item>
				</el-submenu>
				<el-menu-item index="2">{{playFlag?'暂停':'播放'}}</el-menu-item>
				<el-menu-item index="3">{{loopFlag?'不循环':'循环'}}</el-menu-item>
			</el-menu>
			<el-dialog :title="leave_message.title" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
				<span>{{leave_message.content}}</span>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="dialogVisible = false">关闭</el-button>
				</span>
			</el-dialog>
			<div class="audio_group">
				<audio id="audio">
					<source :src="'audio/'+audioSrc+'.mp3'">
				</audio>
			</div>
		</div>
		<div>
			<input style="top: 70px;" type="text" value="" id="thisStar_index">
			<input type="text" value="" id="thisStar_id">
			<input style="top:130px" type="text" value="" id="thisStar_name">
			<ul id="checkStar">
			</ul>
			<div id="svgBox"></div>
		</div>
		<div class="main linear">
			<div class="moon shadow"></div>
			<div class="star">
				<!-- 10 -->
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<!-- 20 -->
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<!-- 30 -->
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<!-- 40 -->
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>

			<div class="house">
				<div class="roof"></div>
				<div class="wall"></div>
				<div class="chimney"></div>
				<div class="window"></div>
			</div>
		</div>
		<!-- import Vue before Element -->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		
		<!-- import JavaScript -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: '#vue',
				data: {
					activeIndex: '1',
					leave_messages: [], //留言数据源
					songs: [], //歌单数据源
					dialogVisible: false, //弹出框是否显示
					leave_message: new Object(), //留言对象
					audioSrc: '失眠飞行', //音频
					audioSource: '',
					playFlag: false, //播放状态
					loopFlag: false, //循环状态
				},
				mounted() {
					// this.$alert('这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容'
					// +'这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容', '标题名称', {
					//           confirmButtonText: '确定',
					//           callback: action => {
					//           }
					//         });
					let that = this;
					this.get_song_data().then(res => {
						that.songs = res;
						console.log(res);
					});
					this.get_leave_message_data().then(res => {
						that.leave_messages = res;
					});
				},
				methods: {
					//跳转至画画界面
					draw(){
						location="draw.html"
					},
					publishMessage(audio) {
						goEasy.publish({
							channel: 'demo_channel',
							message: audio
						});
					},
					//选歌
					click_song(song) {
						console.log(song);
						let audio_group = $(".audio_group");
						let audio = $("#audio");
						audio.remove();
						this.audioSrc = song.name;
						let audioStr = "<audio id='audio' autoplay=''><source src='audio/" + this.audioSrc + ".mp3'></audio>";
						// audio_group.append(audioStr);
						this.publishMessage(audioStr);
						this.playFlag = true; //播放状态
						this.$nextTick(() => {
							// audio = $("#audio").get(0);
							//循环模式继承
							// if (this.loopFlag) {
							// 	audio.loop = true;
							// }
							// this.playFlag = true;
							// console.log(audio);
							// console.log(this.loopFlag);
							// audio.play();
							// let that = this;
							//播放完 
							// audio.addEventListener('ended', function() {
							// 	that.playFlag = false;
							// 	console.log(that.playFlag);
							// }, false);
						})
					},
					//查看留言
					click_leave_msg(msg) {
						this.leave_message = msg;
						this.dialogVisible = true;
					},
					//关闭留言板
					handleClose() {
						this.dialogVisible = false
					},
					//获取歌单数据源
					get_song_data() {
						return new Promise((resolve, reject) => {
							$.ajax({
								url: 'json/song.json',
								type: 'get',
								success(res) {
									console.log(res);
									resolve(res);
								},
								error(err) {
									console.log(err);
									reject(err);
								}
							})
						})
					},
					//获取留言数据源
					get_leave_message_data() {
						return new Promise((resolve, reject) => {
							$.ajax({
								url: 'json/leave_message.json',
								type: 'get',
								success(res) {
									console.log(res);
									resolve(res);
								},
								error(err) {
									console.log(err);
									reject(err);
								}
							})
						})
					},
					//选中事件
					handleSelect(key, keyPath) {
						let audio = $("#audio").get(0);
						switch (key) {
							//播放暂定
							case '2':
								if (this.playFlag == true) {
									audio.pause();
									this.playFlag = false;
								} else {
									audio.play();
									this.playFlag = true;
								}
								break;
							case '3':
								if (this.loopFlag) {
									this.loopFlag = false;
									audio.loop = false;
								} else {
									this.loopFlag = true;
									audio.loop = true;
								}
								break;
						}
						console.log(audio);
					}
				}
			})
		</script>
		<script type="text/javascript" src="https://cdn-hangzhou.goeasy.io/goeasy.js"></script>
		<script type="text/javascript">
			var textarea_value = document.getElementById("textarea");
			if (typeof GoEasy !== 'undefined') {
				var goEasy = new GoEasy({
					appkey: 'BC-2c64b569166543aaba2ce6566a3aec89'
				});
			}

			//页面一加载就订阅
			goEasy.subscribe({
				channel: 'demo_channel',
				onMessage: function(message) {
					let audio_group = $(".audio_group");
					let audio = $("#audio");
					audio.remove();
					console.log(message);
					audio_group.append(message.content);
					setTimeout(()=>{
						let audio = $("#audio").get(0);
						//循环模式继承
						if (this.loopFlag) {
							audio.loop = true;
						}
						this.playFlag = true;
						console.log(audio);
						console.log(this.loopFlag);
						// audio.play();
						let that = this;
					 	//播放完 
						audio.addEventListener('ended', function() {
							that.playFlag = false;
							console.log(that.playFlag);
						}, false);
					},300)
				}
			});

			//推送消息
			// function publishMessage(audio) {
			// 	goEasy.publish({
			// 		channel: 'demo_channel',
			// 		message: audio
			// 	});
			// }
		</script>
		<script>
			let startArr = [{
				"id": "Aries",
				"name": "白羊座",
				"point": [
					[0.3, 0.78],
					[0.34, 0.66],
					[0.28, 0.48],
					[0.6, 0.26],
					[0.65, 0.2],
					[0.71, 0.23],
					[0.7, 0.32],
					[0.72, 0.36]
				],
				"line": [
					[0, 1, 2, 3, 4, 5],
					[3, 6, 7]
				]
			}, {
				"id": "Scorpio",
				"name": "天蝎座",
				"point": [
					[0.17, 0.5],
					[0.28, 0.63],
					[0.19, 0.7],
					[0.28, 0.78],
					[0.41, 0.77],
					[0.49, 0.72],
					[0.57, 0.55],
					[0.59, 0.44],
					[0.69, 0.31],
					[0.74, 0.21],
					[0.82, 0.29],
					[0.79, 0.44],
					[0.73, 0.5],
					[0.38, 0.47]
				],
				"line": [
					[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
					[1, 13],
					[8, 11]
				]
			}]
		</script>
		<!-- 星空渲染 -->
		<script>
			$(function() {
				// 加载列表
				loadMenu()
			})

			function loadMenu() {
				let ulHtml = ''
				startArr.forEach((item, i) => {
					ulHtml += `<li  data-index="` + i + `" ><input type="radio" name="star">` + item.name + `</li>`
				})
				$("#checkStar").empty().append(ulHtml)

				if ($("#checkStar").hasClass("checked1")) {
					$("#checkStar").removeClass("checked1").addClass("checked2")
				} else {
					$("#checkStar").removeClass("checked2").addClass("checked1")
				}
				loadSvg([0, 1]);
			}

			function loadSvg(indexs) {
				let html = '';
				for (let item in indexs) {
					let starIndex = indexs[item];
					let starId = startArr[indexs[item]].id;
					let starName = startArr[indexs[item]].name;
					console.log(starName);
					html += `<svg width="300" height="300">`;
					let polylineArr = startArr[starIndex].line;
					let pointArr = startArr[starIndex].point;
					polylineArr.forEach(element => {
						html += `<polyline fill="none" stroke="#fff" stroke-width="3" points="`
						element.forEach((i, item) => {
							html += parseInt(pointArr[i][0] * 300) + `,` + parseInt(pointArr[i][1] * 300) + ' '
						})
						html += `" stroke-linecap="round" stroke-linejoin="round" class="tick" />`
					});
					html += `</svg>`
				}
				$("#svgBox").empty().append(html)
			}
		</script>
	</body>
</html>
